<template>
  <div>
    <s-title text="预警研判"></s-title>
    <div class="warnJudgmentcon">
      <div class="wjleft">
        <div
          class="wjleft-item"
          :class="item.active ? 'active' : ''"
          v-for="(item, index) in list"
          :key="index"
          @click="wjlefthandle(index)"
        >
          <!-- <span>{{ item.name }}</span> -->
          <el-tooltip
            class="item"
            effect="dark"
            content="点击切换图片"
            placement="top-start"
          >
            <span>{{ item.name }}</span>
          </el-tooltip>
        </div>
      </div>
      <div class="wjright">
        <div
          v-show="item.show"
          class="wjright-item"
          v-for="(item, index) in icon"
          :key="index"
        >
          <img :src="item.url" @click="ImgBtn(item.url,index)"/>
        </div>
      </div>
      <div class="dialogBox-imgBox" v-show="imgBoxshow">
        <el-dialog
          :title="imgText"
          :visible.sync="imgBoxVisible"
          :modal="false"
          top="150px"
          width="30%"
        >
          <img :src="imgBoxUrl"/>
        </el-dialog>
      </div>
      <div class="streetRep-content">
        <el-button class="streetRep" v-for="(item,index) in pdfBtn" :key="index" type="text" @click="open(index)">{{item.name}}</el-button>
      </div>
      <!-- <el-button class="streetRep" type="text" @click="open"
        >街道报告</el-button
      > -->
      <div class="dialogBox" v-show="dialogboxshow">
      <el-dialog
        :title="titlePdf"
        :visible.sync="dialogVisible"
        :modal="false"
        @close="dialogClose()"
        top="200px"
        width="20%"
      >
        <div class="pdfcon" ref="pdfconBox">
          <pdf :src="pdfUrl" v-for="i in numPages" :key="i" :page="i"></pdf>
        </div>
      </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import sTitle from "../../common/sTitle.vue";
import pdf from "vue-pdf";
export default {
  name: "warnJudgment",
  components: {
    sTitle,
    pdf,
  },
  data() {
    return {
      list: [
        {
          active: true,
          name: "高空坠物",
        },
        {
          active: false,
          name: "乱停乱放",
        },
        {
          active: false,
          name: "部件毁坏",
        },
        {
          active: false,
          name: "街面秩序",
        },
        {
          active: false,
          name: "漏水",
        },
        {
          active: false,
          name: "乱张贴",
        },
        {
          active: false,
          name: "积水",
        },
        {
          active: false,
          name: "暴露垃圾",
        },
        {
          active: false,
          name: "安全隐患",
        },
        {
          active: false,
          name: "噪声污染",
        },
        {
          active: false,
          name: "路面结冰",
        },
        {
          active: false,
          name: "水管爆裂",
        },
      ],
      icon: [
        {
          show: true,
          url: require("@/assets/image/right1/yy-gkzw.png"),
        },
        {
          show: false,
          url: require("@/assets/image/right1/yy-fjdclt.png"),
        },
        {
          show: false,
          url: require("@/assets/image/right1/yy-bjsh.png"),
        },
        {
          show: false,
          url: require("@/assets/image/right1/yy-jmzx.png"),
        },
        {
          show: false,
          url: require("@/assets/image/right1/yy-lsyh.png"),
        },
        {
          show: false,
          url: require("@/assets/image/right1/yy-ltx.png"),
        },
        {
          show: false,
          url: require("@/assets/image/right1/yy-jsyh.png"),
        },
        {
          show: false,
          url: require("@/assets/image/right1/yy-bllj.png"),
        },
        {
          show: false,
          url: require("@/assets/image/right1/yy-aqyh.png"),
        },
        {
          show: false,
          url: require("@/assets/image/right1/yy-zyrm.png"),
        },
        {
          show: false,
          url: require("@/assets/image/right1/yy-lmjb.jpg"),
        },
        {
          show: false,
          url: require("@/assets/image/right1/yy-sgbl.jpg"),
        },
      ],
      localactive: 0,
      pdfBtn:[
        {url:'./static/pdf/yy.pdf',name:'防台防汛'},
        {url:'./static/pdf/yy-fhfd.pdf',name:'防寒防冻'},
      ],
      // pdfUrl: "./static/pdf/xdm.pdf",
      pdfUrl: '',
      dialogVisible: true,
      dialogboxshow:false,
      numPages: 0,
      imgBoxUrl:'',
      imgText:'',
      imgBoxshow:false,
      imgBoxVisible:true,
      titlePdf:''
    };
  },
  mounted() {
    this.timer = setInterval(this.shuffling, 8000);
    this.getNumPages1();
    this.getNumPages2();
  },
  methods: {
    wjlefthandle(index) {
      if (this.list[index].active) return;
      this.list[this.localactive].active = false;
      this.icon[this.localactive].show = false;
      this.list[index].active = true;
      this.localactive = index;
      this.icon[index].show = true;
    },
    shuffling() {
      let index = this.localactive;
      this.localactive++;
      if (this.localactive == 12) {
        this.localactive = 0;
        this.list[11].active = false;
        this.icon[11].show = false;
        this.list[this.localactive].active = true;
        this.icon[this.localactive].show = true;
      } else {
        this.list[index].active = false;
        this.icon[index].show = false;
        this.list[this.localactive].active = true;
        this.icon[this.localactive].show = true;
      }
    },
    open(item) {
      this.pdfUrl = this.pdfBtn[item].url;
      this.titlePdf = '豫园街道'+this.pdfBtn[item].name;
      this.dialogVisible = true;
      this.dialogboxshow = true;
    },
    getNumPages1() {
      let loadingTask = pdf.createLoadingTask(this.pdfBtn[0].url);
      loadingTask.promise
        .then((pdf) => {
          this.numPages = pdf.numPages;
        })
        .catch((err) => {
          console.error("pdf 加载失败", err);
        });
    },
    getNumPages2() {
      let loadingTask = pdf.createLoadingTask(this.pdfBtn[1].url);
      loadingTask.promise
        .then((pdf) => {
          this.numPages = pdf.numPages;
        })
        .catch((err) => {
          console.error("pdf 加载失败", err);
        });
    },
    ImgBtn(item,index){
      this.imgBoxshow = true;
      this.imgBoxVisible = true;
      this.imgText= this.list[index].name
      this.imgBoxUrl = item
    },
    dialogClose(){
      this.$refs.pdfconBox.scrollTop = 0
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.warnJudgmentcon {
  width: 100%;
  height: 330px;
  color: #fff;
}
.wjleft {
  width: 42%;
  height: 260px;
  float: left;
}
.wjleft .active {
  background: url(~@/assets/image/right1/early-warning-item-active.png);
}
.wjleft-item {
  width: 120px;
  height: 40px;
  float: left;
  margin-left: 10px;
  background: url(~@/assets/image/right1/early-warning-item.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;

  text-align: center;
  line-height: 40px;
  font-size: 18px;
  margin-bottom: 5px;
  cursor: pointer;
}

.wjright {
  width: 55%;
  height: 260px;
  border: 1px solid #0294d8;
  border-radius: 2px;
  float: right;
  overflow: hidden;
}
.wjright-item {
  width: 100%;
  height: 100%;
}
.wjright-item img {
  width: 100%;
  height: 100%;
}
.streetRep-content{
    width: 625px;
    height: 40px;
    position: absolute;
    bottom: 25px;
    display: flex;
    justify-content: space-around;
}
.streetRep {
  width: 130px;
  height: 40px;
  /* line-height: 40px; */
  /* text-indent: 50px; */
  text-indent: 30px;
  font-weight: bold;
  overflow: hidden;
  /* margin-left: 250px; */
  font-size: 15px;
  color: #00aeff;
  background: url(~@/assets/image/right1/streetRep.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /* position: absolute; */
  bottom: 20px;
  cursor: pointer;
}
.pdfcon {
  width: 100%;
  height: 700px;
  overflow-y: auto;
}
.pdfcon::-webkit-scrollbar {
  /*滚动条整体样式*/

  width: 5px; /*高宽分别对应横竖滚动条的尺寸*/

  height: 1px;
}

.pdfcon::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #00aeff;
}

.pdfcon::-webkit-scrollbar-track {
  /*滚动条里面轨道*/

  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);

  border-radius: 10px;
}
.dialogBox-imgBox img{
  width: 100%;
  height: 100%;
}
</style>
 